<template>
    <div class="music">
        <Tan></Tan>
        <img src="../../../state/返回2.png" alt="" style="width: 16px; position: absolute; left: 10px; top: 15px"
            @click="navi">
        <div class="top" v-if="getDataStore.MvList">
            <img src="../../../state/u192.svg" alt="">
            <div class="info">
                <h3 style="line-height: 10px;">{{getDataStore.MvList.title}}</h3>
                <p class="p">{{getDataStore.MvList.desc}}</p>
                <button class="btn" @click="router.push('/recharge')"> <img src="../../../state/u199.svg" alt=""> <span
                        style="display: inline-block; margin-left: 4px">会员免费</span> </button>
                
            </div>
        </div>
        <div class="bottom">
            <div class="t">
                <van-tabs v-model:active="active" animated>
                    <van-tab v-for="index in topName" :title="index.name">
                        <JieShao v-show="index.id == 1" />
                        <Class v-show="index.id == 2" :id="id" />
                    </van-tab>
                </van-tabs>
            </div>
        </div>
    </div>
</template>

<script setup>
import { useRoute, useRouter } from 'vue-router';
import JieShao from './JieShao.vue';
import Tan from './Tan.vue';
import Class from './Class.vue';
import { ref, onMounted, onUnmounted } from 'vue';
import axios from 'axios';
import { useDataStore } from '../../stores/dataStore';
import { storeToRefs } from 'pinia';
const getDataStore = useDataStore()
const { getMvList } = getDataStore
// const isVip = JSON.parse(localStorage.getItem('chat-app-user')).user._id
// const getVip = () => {

// }
onMounted(()=>{
    let cid = route.query.id    
    console.log(cid);
    
    getMvList(cid)
})
let length = ref(0)
console.log(getDataStore.length, '111');

length   = getDataStore.length
let active = ref(1)
let router = useRouter()
let route = useRoute()
let id = route.query.id
localStorage.setItem('id', id)

// const getMvList = async() =>{    
//     const cid = route.query.id    
//     console.log(cid);
//     await axios.get(`http://localhost:3000/getMvList/?cid=${cid}`)
//     .then(res=>{
//         list.value = res.data.list
//     })    
// }
const navi = () =>{
    router.push('/choose')
}
let topName = ref([
    { id: 1, name: '介绍' },
    { id: 2, name: `课表(${length})` }
])
let title = ref([
    { id: 1, name: '化学' },
    { id: 2, name: '物理' },
    { id: 3, name: '历史' },
    { id: 4, name: '生物' },
    { id: 5, name: '科学' },
    { id: 6, name: '地理' },
])
</script>

<style scoped>
.card-tabs .n-tabs-nav--bar-type {
    padding-left: 4px;
}

.bottom {
    width: 100%;
    height: 75%;
    position: absolute;
    bottom: 0px;
    background-color: white;
    overflow: scroll;
}

.btn {
    position: absolute;
    background-image: linear-gradient(to bottom, rgb(130, 130, 130), rgb(78, 78, 78));
    border: 0px;
    width: 100px;
    text-align: center;
    line-height: 28px;
    color: rgb(234, 210, 167);
    font-size: small;
    border-radius: 20px;
}

.p {
    font-size: small;
    font-weight: 300;
}

.music {
    height: 100%;
    position: absolute;
    width: 100%;
    overflow: hidden;
    background-color: rgb(247, 236, 221);
}

.top {
    width: 90%;
    display: flex;
    margin: 0 auto;
    margin-top: 40px;
    box-sizing: border-box;
}

.info {
    margin-left: 10px;
}
</style>